
<template >
  <!-- 布局 -->
  <el-container style="height: 100vh">
    <el-main>
      <!-- 查询框 -->
      <el-form :model="formInline" ref="formInline" label-width="100px" inline>
        <el-form-item label="id" label-width="20px" prop="linkId">
          <el-input
            v-model.number="formInline.id"
            style="width: 80px"
            placeholder="可选"
          ></el-input>
        </el-form-item>
        <el-form-item label="书名" label-width="50px">
          <el-input
            v-model="formInline.title"
            style="width: 150px"
            placeholder="可选,模糊查询"
          ></el-input>
        </el-form-item>
        <el-form-item label="作者" label-width="50px">
          <el-input
            v-model="formInline.authors"
            style="width: 150px"
            placeholder="可选,模糊查询"
          ></el-input>
        </el-form-item>
        <el-form-item label="出版社" label-width="80px">
          <el-input
            v-model="formInline.pulisher"
            style="width: 150px"
            placeholder="可选,模糊查询"
          ></el-input>
        </el-form-item>
        <el-form-item label="出版日期" label-width="70px">
          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="formInline.publicationDate"
              style="width: 150px"
            ></el-date-picker>
          </el-form-item>
        </el-form-item>
        <el-form-item label="书籍类型" label-width="70px">
          <el-input
            v-model="formInline.type"
            style="width: 150px"
            placeholder="可选,模糊查询"
          ></el-input>
        </el-form-item>

        <el-form-item style="">
          <el-button type="primary" @click="onSubmit()">立即查询</el-button>
          <el-button @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 展示多选个数、添加书籍按钮、批量删除按钮 -->
      <div class="exAdd">
        <div>
          已选 <span style="color: green">{{ this.num }}</span> 项
        </div>
        <div>
          <el-button type="danger" round @click="dialogAddVisible = true"
            >添加书籍</el-button
          >
          <el-button type="info" round @click="delList()">批量删除</el-button>
        </div>
      </div>

      <!-- 数据展示区域 -->
      <div style="margin-top: 10px; margin-bottom: 10px">
        <el-table
          height="480px"
          border
          ref="multipleTable"
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :row-key="getRowKeyOfTarget"
          :default-sort="{ prop: 'id', order: 'descending' }"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
            v-model="checked"
            :reserve-selection="true"
          >
          </el-table-column>
          <el-table-column label="$" align="center" type="index" width="50">
          </el-table-column>
          <!-- 加入根据ID排序 -->
          <el-table-column
            prop="id"
            label="id"
            width="60"
            align="center"
            sortable
          ></el-table-column>
          <el-table-column
            prop="title"
            label="书名"
            width="120"
            show-overflow-tooltip
            align="center"
          ></el-table-column>
          <el-table-column
            prop="description"
            label="详细信息"
            width="280"
            show-overflow-tooltip
            align="center"
          ></el-table-column>
          <el-table-column
            prop="authors"
            label="作者"
            width="120"
            show-overflow-tooltip
            align="center"
          ></el-table-column>
          <el-table-column
            prop="pulisher"
            label="出版社"
            width="120"
            show-overflow-tooltip
            align="center"
          ></el-table-column>
          <!-- 加入根据出版日期排序 -->
          <el-table-column
            prop="publicationDate"
            label="出版日期"
            width="180"
            align="center"
            sortable
          >
            <template slot-scope="scope">{{
              scope.row.publicationDate
            }}</template>
          </el-table-column>
          <el-table-column
            prop="type"
            label="书籍类型"
            width="120"
            show-overflow-tooltip
            align="center"
          ></el-table-column>
          <!-- 加入根据库存数量排序 -->
          <el-table-column
            prop="stockAmount"
            label="库存数量"
            width="120"
            align="center"
            sortable
          ></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="
                  dialogUpdateVisible = true;
                  getDate(scope.row);
                "
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="mini"
                @click="
                  getDate(scope.row);
                  delBook();
                "
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页器 -->
      <div class="block">
        <el-pagination
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
      <!-- 修改数据弹框-->
      <el-dialog
        title="修改数据"
        :visible.sync="dialogUpdateVisible"
        width="40%"
        append-to-body
      >
        <el-form :model="update" label-width="80px" :rules="rules" ref="update">
          <el-form-item
            label="书名"
            :label-width="formLabelWidth"
            required
            prop="title"
          >
            <el-input
              v-model="update.title"
              autocomplete="off"
              placeholder=""
            ></el-input>
          </el-form-item>
          <el-form-item
            label="书籍描述"
            :label-width="formLabelWidth"
            required
            prop="description"
          >
            <el-input
              v-model="update.description"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="作者"
            :label-width="formLabelWidth"
            required
            prop="authors"
          >
            <el-input v-model="update.authors" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="出版社" :label-width="formLabelWidth">
            <el-input v-model="update.pulisher" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="出版时间" :label-width="formLabelWidth">
            <el-date-picker
              v-model="update.publicationDate"
              type="date"
              placeholder="选择出版日期"
              format="yyyy-MM-dd"
              value-format="timestamp"
              style="width: 100%"
            >
              >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="书籍类型" :label-width="formLabelWidth">
            <el-input v-model="update.type" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="书籍库存" :label-width="formLabelWidth">
            <el-input
              v-model="update.stockAmount"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogUpdateVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="
              dialogUpdateVisible = false;
              updateBook();
            "
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- 新增书籍 对话框 -->
      <el-dialog
        title="新增书籍"
        :visible.sync="dialogAddVisible"
        width="40%"
        append-to-body
      >
        <el-form :model="add" label-width="80px" :rules="rules" ref="add">
          <el-form-item label="书名" :label-width="formLabelWidth" prop="title">
            <el-input
              v-model="add.title"
              autocomplete="off"
              placeholder="必填"
            ></el-input>
          </el-form-item>
          <el-form-item label="书籍描述" :label-width="formLabelWidth">
            <el-input v-model="add.description" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="作者" :label-width="formLabelWidth">
            <el-input v-model="add.authors" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="出版社" :label-width="formLabelWidth">
            <el-input v-model="add.pulisher" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="出版时间" :label-width="formLabelWidth">
            <el-date-picker
              v-model="add.publicationDate"
              type="date"
              placeholder="选择出版日期"
              format="yyyy-MM-dd"
              value-format="timestamp"
              style="width: 100%"
            >
              >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="书籍类型" :label-width="formLabelWidth">
            <el-input v-model="add.type" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="书籍库存" :label-width="formLabelWidth">
            <el-input
              v-model.number="add.stockAmount"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="
              dialogAddVisible = false;
              addBook();
            "
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>

 

<script>
import axios from "axios";

export default {
  data() {
    return {
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 20, // 每页的数据条数

      multipleSelection: [],
      checked: "",
      num: "",
      input: "",
      select: "",
      tableData: [],
      dialogAddVisible: false,
      dialogUpdateVisible: false,

      formLabelWidth: "120px",

      // 查询数据
      formInline: {
        id: "",
        title: "",
        description: "",
        authors: "",
        pulisher: "",
        publicationDate: "",
        type: "",
        stockAmount: "",
      },
      //添加数据
      add: {
        id: "",
        title: "",
        description: "",
        authors: "",
        pulisher: "",
        publicationDate: "",
        type: "",
        stockAmount: "",
      },
      // 修改数据
      update: {
        id: "",
        title: "",
        description: "",
        authors: "",
        pulisher: "",
        publicationDate: "",
        type: "",
        stockAmount: "",
      },
      // 删除数据
      delete: {
        id: "",
        title: "",
        description: "",
        authors: "",
        pulisher: "",
        publicationDate: "",
        type: "",
        stockAmount: "",
      },
      rules: {
        title: [{ required: true, message: "请输入书名", trigger: "blur" }],
      },
    };
  },

  methods: {
    // 批量删除
    delList: function () {
      const param = this.multipleSelection;
      axios
        .post("http://localhost:8080/admin/deletelist", param)
        .then((res) => {
          if (res.data.data.statusCode < 0) {
            var a = JSON.stringify(param);
            this.$message({
              type: "error",
              message: "删除失败" + a,
            });
          } else {
            this.$message({
              type: "success",
              message: "删除成功！",
              onClose: location.reload(),
            });
          }
        });
    },
    //获取当前列的数据
    getDate: function (e) {
      this.update.id = e.id;
      this.update.title = e.title;
      this.update.description = e.description;
      this.update.authors = e.authors;
      this.update.pulisher = e.pulisher;
      this.update.publicationDate = e.publicationDate;
      this.update.type = e.type;
      this.update.stockAmount = e.stockAmount;
      this.delete.id = e.id;
    },
    // add
    addBook: function () {
      this.$refs["add"].validate((valid) => {
        if (valid) {
          axios
            .post("http://localhost:8080/admin/insert", this.add)
            .then((res) => {
              if (res.data.data == "1") {
                this.$message({
                  type: "success",
                  message: "添加成功!",
                  // onClose: location.reload(),
                });
              } else {
                this.$message({
                  type: "error",
                  message: "添加失败",
                });
              }
            });
        } else {
          this.$message({
            type: "error",
            message: "请填写数据",
          });
          return false;
        }
      });
    },
    // del
    delBook: function () {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios
            .post("http://localhost:8080/admin/delete", this.delete)
            .then((res) => {
              if (res.data.data == "0") {
                this.$message({
                  type: "error",
                  message: "删除失败",
                });
              } else {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                  onClose: () => location.reload(),
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // update
    updateBook: function () {
      this.$refs["update"].validate((valid) => {
        if (valid) {
          axios
            .post("http://localhost:8080/admin/update", this.update)
            .then((res) => {
              if (res.data.data == "1") {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                  onClose: location.reload(),
                });
              } else {
                this.$message({
                  type: "error",
                  message: "修改失败",
                });
              }
            });
        } else {
          this.$message({
            type: "error",
            message: "请填写数据",
          });
          return false;
        }
      });
    },
    //查询
    onSubmit: function () {
      axios
        .post("http://localhost:8080/admin/selectBook", this.formInline)
        .then((res) => {
          if (res.data.data == "") {
            this.$message({
              type: "error",
              message: "没有该数据",
            });
          } else {
            this.$message({
              type: "success",
              message: "查询成功!",
            });
            this.tableData = res.data.data;
          }
        });
    },
    // 重置
    reset: function () {
      this.formInline.id = "";
      this.formInline.title = "";
      this.formInline.description = "";
      this.formInline.authors = "";
      this.formInline.pulisher = "";
      this.formInline.publicationDate = "";
      this.formInline.type = "";
      this.formInline.stockAmount = "";
      location.reload();
    },
    getRowKeyOfTarget(row) {
      return row.tgdetail;
    },
    // 取消选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 多选框数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.num = this.multipleSelection.length;
    },
    // 切换每页大小
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    // 切换页面
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
  },
  mounted() {
    //获取数据库表数据
    axios.get("http://localhost:8080/admin/selectAll").then((res) => {
      this.tableData = res.data.data;
    });
    axios.get("http://localhost:8080/admin/countNum").then((res) => {
      this.total = res.data.data;
    });
  },
};
</script>

<style>
body {
  margin: 0;
}
#app > section > aside > ul > li > ul > div > div > div.el-dialog__header {
  height: 100px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  /* line-height: 50px; */
}

body > .el-container {
  margin-bottom: 0px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.exAdd {
  display: flex;
  justify-content: space-between;
  align-content: center;
  line-height: 50px;
}
</style>